import { useEffect, useState } from 'react';
import { Button, Tabs, Skeleton } from 'antd';
import { CheckOutlined } from '@ant-design/icons';
import IndexStyle from '@/layouts/index.less';
import TextImg from '@/assets/test.png';

export default function APPDetail({ data, onClose }){
    const { appName, type, icon, status } = data;
    const [currentTab, setCurrentTab] = useState('1');
    const items = [
        { label:'介绍', key:'1', children:<div><img src={TextImg} /></div> },
        { label:'详情', key:'2', children:<div><img src={TextImg} /></div> }
    ];
    useEffect(()=>{
        return ()=>{
            onClose();
        }
    },[])
    return (
        <div style={{ width:'800px', margin:'0 auto' }}>
            <div className={IndexStyle['flex-container']} style={{ margin:'2rem 0'}}>
                <div className={IndexStyle['flex-item']}>
                    <div className={IndexStyle['flex-item-header']}>
                        <div className={IndexStyle['flex-item-header-icon'] + ' ' + IndexStyle['large']} style={{ backgroundImage:`url(${icon})`}}></div>
                        <div className={IndexStyle['flex-item-header-title']}>
                            <div className={IndexStyle['title']}>{ appName }</div>
                            <div>广东华翊智能科技有限公司</div>
                            {
                                status 
                                ?
                                <Button icon={<CheckOutlined style={{ color:'#b7b7b7' }} />} style={{ background:'#eee', color:'#b7b7b7' }}>已配置</Button>
                                :
                                <Button style={{ margin:'6px 0' }} type='primary'>申请体验</Button>
                            }
                            <div>
                                <span className={IndexStyle['tag']}>碳减排</span>
                                <span className={IndexStyle['tag']}>节能</span>
                                <span className={IndexStyle['tag']}>能源</span>

                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
            {/* 详情介绍 */}
            <Tabs 
                activeKey={currentTab}
                onChange={activeKey=>setCurrentTab(activeKey)}
                items={items}
            />
        </div>
    )
}